<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
	font-family: sans-serif;
	font-size: 10pt;
}
td {
	border-bottom: silver solid 1px;
	padding-right: 10px;
}
td.wi-closed {
	color: green;
}
.copyright {
	color: gray;
	font-size: 8pt;
}
#details-header {
	font-size: 12pt;
	font-weight: normal;
}
th.plan-header {
	text-align: left;
	padding-top: 15px;
	color: brown;
}
</style>
<script type="text/javascript" src="/ui/jquery-1.3.2.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("#user-panel").html("Loading...");
	$.get('/users', {}, function(xml) {
		children = $("user", xml);
		var res = '<select id="user-list" onchange="showHistory()"><option>Select user...</option>';
		for (i = 0; i < children.length; ++i) {
			id = children.get(i).getAttribute("id");
			name = children.get(i).getAttribute("name");
			res += '<option value="' + id + '">' + name + '</option>';
		}
		res += '</select>';
		$("#user-panel").html(res);
	});
});

function showHistory () {
	var user = $("#user-list");
	// TODO: Get actual selected value
	user = "kostya";

	$("#plan-panel").html("Loading...");
	$.get('/users/' + user + '/plans', {}, function(xml) {
		children = $("plan", xml);
		var res = '<select id="plan-list" onchange="showDetails()"><option>Select plan...</option>';
		for (i = 0; i < children.length; ++i) {
			date = children.get(i).getAttribute("date");
			status = children.get(i).getAttribute("status");
			res += '<option value="' + date + '">' + date + ' (' + status + ')</option>';
		}
		res += '</select>';
		$("#plan-panel").html(res);
	});
}

function renderPomodoros (poms) {
	var res = '';
	for (j = 0; j < poms.length; ++j) {
		var status = poms.item(j).getAttribute('status');
		if (status == 'closed') {
			res += '<input type="checkbox" disabled="true" checked="true"></input> ';
		} else {
			res += '<input type="checkbox" disabled="true"></input> ';
		}
	}
	return res;
}

function showDetails () {
	var user = $("#user-list");
	// TODO: Get actual selected value
	user = "kostya";

	var plan = $("#plan-list");
	// TODO: Get actual selected value
	plan = "2001-03-02";

	var dateUrl = plan.split('-')[0] + '/' + plan.split('-')[1] + '/' + plan.split('-')[2];

	$("#details-panel").html("Loading...");
	$.get('/users/' + user + '/plans/' + dateUrl, {}, function(xml) {
		var resH = 'Plan for ' + plan;

		children = $("workitem", xml);

		var resP = '<table class="plan" cellspacing="0">';
		resP += '<tr><th colspan="3" class="plan-header">Planned</th></tr>';
		var oldSection = '';
		for (i = 0; i < children.length; ++i) {
			section = children.get(i).getAttribute("section");
			title = children.get(i).getAttribute("title");
			status = children.get(i).getAttribute("status");
			if (section != oldSection && oldSection != '') {
				resP += '<tr><th colspan="3" class="plan-header">Unplanned and urgent</th></tr>';
			}
			oldSection = section;
			poms = children.get(i).children;
 			resP += '<tr><td class="wi-' + status + '">' + (i + 1) + '.</td><td class="wi-' + status + '">' + title + '</td><td>' + renderPomodoros(poms) + '</td></tr>';
		}
		// Render Total section
		resP += '<tr><th colspan="3" class="plan-header">Statistics</th></tr>';
		resP += '<tr><td colspan="3">5 / 8 (66%) Pomodoros (2:30 / 4:00), 5 interruptions</td></tr>';
		resP += '<tr><td colspan="3">2 / 5 (43%) Work Items</td></tr>';
		resP += '</table>';

		$("#details-header").html(resH);
		$("#details-panel").html(resP);
	});
}

</script>
<title>Pomodoro Client</title>
</head>

<body>
<center>
<h1>Simple Pomodoro Client</h1>

<span id="user-panel"></span> <span id="plan-panel"></span>

<h2 id="details-header"></h2>
<span id="details-panel"></span>

<br>
<p class="copyright">(C) Constantine Kulak 2009-2010</p>
</center>
</body>

</html>